
<!--订购房间页面-->
<!--数据交互-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房间预订</title>
</head>
<link href="CSS/HomePage.css" type="text/css" rel="stylesheet">
<link href="CSS/list.css" type="text/css" rel="stylesheet">
<link href="CSS/jquery-ui.min.css" type="text/css" rel="stylesheet">
<link href="CSS/owl.carousel.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/DateSelect.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/roomstouch.js"></script>

<body>
<script>
    if (sessionStorage.getItem('isLogined')!='true'){
        alert('请先登录！');
        window.location.href='Login_Custom.html';
    }
</script>
<div class="pg1">
    <div class="pg">
        <div class="pg_top">
            <div class="logo">
                <div class="lg"><img src="images/logopic.jpg" alt="香格里拉酒店" title="香格里拉酒店"></div>
                <div class="star">&nbsp;★★★★★</div>
            </div>
            <div class="htitle">
                <h1>香格里拉酒店</h1></br>
                <span class="htitleEn">ShANGRI-LA Business Hotel </span>
            </div>
            <div class="htopr">
                <div class="registe">
                    </br>
                    <a href="Register.html">注册</a>
                    <a href="Login_Custom.html">&nbsp;&nbsp;退出登录&nbsp;</a>
                </div>
                <br><br>
                <br>
                <div class="address">地址：南京市玄武区孝陵卫XXX号XXX街道</div>
                <div class="address" style="font-weight: bold"></div>
            </div>
        </div>
        <div class="menu">
            <ul class="clear">
                <li class="issues"></li>
                <li>
                    <a href="HomePage.html">首&nbsp;&nbsp;页</a>
                </li>
                <li class="issues"></li>
                <li>
                    <a href="rooms.html">客房预订</a>
                </li>
                <li class="issues"></li>
                <li>
                    <a href="catering.html">餐饮服务</a>
                </li>
                <li class="issues"></li>
                <li>
                    <a href="leaving.html">退房办理</a>
                </li>
                <li class="issues"><li>
                <li>
                    <a href="Aboutus.html">关于我们</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="pg">
    <div class="hc">
        <div class="hcl">
            <div class="pict">
                <div class="l01t">客房预订流程</div>
                <div class="pictpic">
                    <img src="images/procedure.jpg">
                </div>
            </div>
        </div>
        <div class="hcr1">
        <div class="r01">
            <div class="r01l">在线预定房间</div><span class="enlm">Ordering Online</span>
            <div class="r01r">
                <a href="HomePage.html.html">首页</a> &gt; 在线预订</div>
        </div>
            <div class="r02">
                <table>
                    <tr>
                        <td>
                            以下为本店提供的各类房间，供您挑选
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="leaving.html">点击!查看您的消费</a>
                        </td>
                    </tr>
                </table>
            </div>
            <table id="tablelist">
            <thead>
                <tr>
                    <th>
                        选择
                    </th>
                    <th>房间名称</th>
                    <th>房间图片</th>
                    <th>房间价格（押金）</th>
                    <td>入住时间</td>
                    <td>居住天数</td>
                    <td>支付方式</td>
                    <th>房间数量</th>
                </tr>
            </thead>
            <tbody id="roomtbody">
               <tr id="tehui">
                  <td><input name="checkItem" type="checkbox" value="" ></td>
                  <td>特惠标准间</td>
                   <td class="imgtd"><img src="images/imgs1.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                  <td>112</td>
                   <td><input type="date" class="datebox" name="rz1" id="rz1"  value="2018-07-22"></td>
                   <td><input type="text" class="datebox" name="leave1" id="leave1"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr class="odd" id="yaju">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>雅居大床房</td>
                   <td class="imgtd"><img src="images/imgs2.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>128</td>
                   <td><input type="date" class="datebox" name="rz2" id="rz2"></td>
                   <td><input type="text" class="datebox" name="leave2" id="leave2"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr id="siren">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>私人观影院</td>
                   <td class="imgtd"><img src="images/imgs3.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>125</td>
                   <td><input type="date" class="datebox" name="rz3" id="rz3"></td>
                   <td><input type="text" class="datebox" name="leave3" id="leave3"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr class="odd" id="miren">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>迷你单人间</td>
                   <td class="imgtd"><img src="images/imgs4.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>127</td>
                   <td><input type="date" class="datebox" name="rz4" id="rz4"></td>
                   <td><input type="text" class="datebox" name="leave4" id="leave4"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr id="qinlv">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>情侣大床房</td>
                   <td class="imgtd"><img src="images/imgs5.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>134</td>
                   <<td><input type="date" class="datebox" name="rz5" id="rz5"></td>
                   <td><input type="text" class="datebox" name="leave5" id="leave5"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr class="odd" id="xingzhen">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>行政标准间</td>
                   <td class="imgtd"><img src="images/imgs6.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>170</td>
                   <td><input type="date" class="datebox" name="rz6" id="rz6"></td>
                   <td><input type="text" class="datebox" name="leave6" id="leave6"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr id="yule">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>娱乐棋牌房</td>
                   <td class="imgtd"><img src="images/imgs7.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>194</td>
                   <td><input type="date" class="datebox" name="rz7" id="rz7"></td>
                   <td><input type="text" class="datebox" name="leave7" id="leave7"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
               <tr class="odd" id="qinzi">
                   <td><input name="checkItem" type="checkbox" value=""></td>
                   <td>亲子房</td>
                   <td class="imgtd"><img src="images/imgs8.jpg" style="margin-top: 10px;  position: relative; height: 30px; width: 80%"></td>
                   <td>195</td>
                   <td><input type="date" class="datebox" name="rz8" id="rz8"></td>
                   <td><input type="text" class="datebox" name="leave8" id="leave8"></td>
                   <td>
                       <select>
                           <option value="17">现金</option>
                           <option value="18">微信/支付宝</option>
                           <option value="19">信用卡</option>
                       </select>
                   </td>
                   <td></td>
               </tr>
            </tbody>
            </table>
            <script type="text/javascript">
                $(function(){
                    var $table=$("#tablelist"),
                        currentPage=0;
                    var pageSize=6;
                    $table.bind('paging',function(){
                        $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
                    });
                    var sumRows=$table.find('tbody tr').length;
                    var sumPages=Math.ceil(sumRows/pageSize);
                    var $pager=$("<div class='pagin'></div>");
                    for(var pageindex=0;pageindex<sumPages;pageindex++){
                        //为页标签加上链接
                        $('<a href="#"><span>'+(pageindex+1)+'</span></a>').bind('click',{"newpage":pageindex},function(event){
                            currentPage=event.data["newpage"];
                            $table.trigger('paging');
                        }).appendTo($pager);

                        $pager.append(' ');
                    }
                    $pager.insertAfter($table);
                    $table.trigger('paging');
                })

            </script>

        </div>
        <div class="book1">
            <input id="setCheckDate" type="image" src="images/searbtn1.jpg" />
        </div>
    </div>
</div>
<div class="pg2">
    <div class="pg">
        <div class="foot">
            <a href="HomePage.html" title="香格里拉酒店">网站首页</a> |
            <a href="Aboutus.html" title="关于我们">关于我们</a> Copyright @ ShanggerilaHotel.cn All rights reserved<br /> 香格里拉酒店　Shanggerila Business Hotel ICP备11101838号
        </div>
    </div>
</div>
</body>
</html>